<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="shortcut icon"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
      type="image/x-icon"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
    />
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
    />
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  </head>
  <body>
    <div class="content font-class">
      <ul class="icon_lists dib-box">
        <li class="dib">
          <span class="icon iconfont epic-icon-fangda"></span>
          <div class="name">放大</div>
          <div class="code-name">.epic-icon-fangda</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-shangchuan"></span>
          <div class="name">上传</div>
          <div class="code-name">.epic-icon-shangchuan</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zaixianjiance"></span>
          <div class="name">1在线监测</div>
          <div class="code-name">.epic-icon-zaixianjiance</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-gaojingguanli"></span>
          <div class="name">1告警管理</div>
          <div class="code-name">.epic-icon-gaojingguanli</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-gaojing"></span>
          <div class="name">告警</div>
          <div class="code-name">.epic-icon-gaojing</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-dayin"></span>
          <div class="name">打印</div>
          <div class="code-name">.epic-icon-dayin</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-qiandaoxinxi"></span>
          <div class="name">签到信息</div>
          <div class="code-name">.epic-icon-qiandaoxinxi</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-shezhi"></span>
          <div class="name">设置</div>
          <div class="code-name">.epic-icon-shezhi</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-neirongshezhi"></span>
          <div class="name">内容设置</div>
          <div class="code-name">.epic-icon-neirongshezhi</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-duihua"></span>
          <div class="name">对话</div>
          <div class="code-name">.epic-icon-duihua</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-dabaoxiazai"></span>
          <div class="name">打包下载</div>
          <div class="code-name">.epic-icon-dabaoxiazai</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zhengque"></span>
          <div class="name">正确</div>
          <div class="code-name">.epic-icon-zhengque</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-chuangkou"></span>
          <div class="name">窗口</div>
          <div class="code-name">.epic-icon-chuangkou</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-shezhi1"></span>
          <div class="name">设置</div>
          <div class="code-name">.epic-icon-shezhi1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-fuzhi"></span>
          <div class="name">复制</div>
          <div class="code-name">.epic-icon-fuzhi</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-cunchu"></span>
          <div class="name">存储</div>
          <div class="code-name">.epic-icon-cunchu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-wangge"></span>
          <div class="name">网格</div>
          <div class="code-name">.epic-icon-wangge</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-bofang"></span>
          <div class="name">播放</div>
          <div class="code-name">.epic-icon-bofang</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-diyinliang"></span>
          <div class="name">低音量</div>
          <div class="code-name">.epic-icon-diyinliang</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tiaozheng"></span>
          <div class="name">调整</div>
          <div class="code-name">.epic-icon-tiaozheng</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-shangjiantou"></span>
          <div class="name">上箭头</div>
          <div class="code-name">.epic-icon-shangjiantou</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-xiajiantou"></span>
          <div class="name">下箭头</div>
          <div class="code-name">.epic-icon-xiajiantou</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-youjiantou"></span>
          <div class="name">右箭头</div>
          <div class="code-name">.epic-icon-youjiantou</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zuojiantou"></span>
          <div class="name">左箭头</div>
          <div class="code-name">.epic-icon-zuojiantou</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-daliebiao"></span>
          <div class="name">大列表</div>
          <div class="code-name">.epic-icon-daliebiao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-dasuolvetuliebiao"></span>
          <div class="name">大缩略图列表</div>
          <div class="code-name">.epic-icon-dasuolvetuliebiao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-liebiao"></span>
          <div class="name">列表</div>
          <div class="code-name">.epic-icon-liebiao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tuwenxiangqing"></span>
          <div class="name">图文详情</div>
          <div class="code-name">.epic-icon-tuwenxiangqing</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-a-pingbantoubu"></span>
          <div class="name">平板（头部）</div>
          <div class="code-name">.epic-icon-a-pingbantoubu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-a-shoujitoubu"></span>
          <div class="name">手机（头部）</div>
          <div class="code-name">.epic-icon-a-shoujitoubu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-a-diannaotoubu"></span>
          <div class="name">电脑（头部）</div>
          <div class="code-name">.epic-icon-a-diannaotoubu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-daibanshixiang"></span>
          <div class="name">待办事项</div>
          <div class="code-name">.epic-icon-daibanshixiang</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-mima"></span>
          <div class="name">密码</div>
          <div class="code-name">.epic-icon-mima</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-baocun"></span>
          <div class="name">保存</div>
          <div class="code-name">.epic-icon-baocun</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-baocun1"></span>
          <div class="name">保存</div>
          <div class="code-name">.epic-icon-baocun1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-baocun2"></span>
          <div class="name">保存</div>
          <div class="code-name">.epic-icon-baocun2</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-yanse"></span>
          <div class="name">颜色</div>
          <div class="code-name">.epic-icon-yanse</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tuozhuai"></span>
          <div class="name">拖拽</div>
          <div class="code-name">.epic-icon-tuozhuai</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-chaxun"></span>
          <div class="name">查询</div>
          <div class="code-name">.epic-icon-chaxun</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tianjia"></span>
          <div class="name">添加</div>
          <div class="code-name">.epic-icon-tianjia</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tianjia1"></span>
          <div class="name">添加</div>
          <div class="code-name">.epic-icon-tianjia1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-yulan"></span>
          <div class="name">预览</div>
          <div class="code-name">.epic-icon-yulan</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-fanhui2x"></span>
          <div class="name">返回@2x</div>
          <div class="code-name">.epic-icon-fanhui2x</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-chexiao2x"></span>
          <div class="name">撤销@2x</div>
          <div class="code-name">.epic-icon-chexiao2x</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zhankai"></span>
          <div class="name">展开</div>
          <div class="code-name">.epic-icon-zhankai</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-fuzhi3"></span>
          <div class="name">复制</div>
          <div class="code-name">.epic-icon-fuzhi3</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-shanchu1"></span>
          <div class="name">删除</div>
          <div class="code-name">.epic-icon-shanchu1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-circular"></span>
          <div class="name">circular</div>
          <div class="code-name">.epic-icon-circular</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-gengduo"></span>
          <div class="name">更多</div>
          <div class="code-name">.epic-icon-gengduo</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-daima1"></span>
          <div class="name">代码</div>
          <div class="code-name">.epic-icon-daima1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-mokuai_1"></span>
          <div class="name">模块_1</div>
          <div class="code-name">.epic-icon-mokuai_1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-LC_icon_edit_line_1"></span>
          <div class="name">LC_icon_edit_line_1</div>
          <div class="code-name">.epic-icon-LC_icon_edit_line_1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-chaifen"></span>
          <div class="name">拆分</div>
          <div class="code-name">.epic-icon-chaifen</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-danxuanxuanzhong"></span>
          <div class="name">单选 选中</div>
          <div class="code-name">.epic-icon-danxuanxuanzhong</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-ai-code"></span>
          <div class="name">代码</div>
          <div class="code-name">.epic-icon-ai-code</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-duoxuan1"></span>
          <div class="name">多选</div>
          <div class="code-name">.epic-icon-duoxuan1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-kaiguan3"></span>
          <div class="name">开关3</div>
          <div class="code-name">.epic-icon-kaiguan3</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-biaoge"></span>
          <div class="name">表格</div>
          <div class="code-name">.epic-icon-biaoge</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-html"></span>
          <div class="name">html5</div>
          <div class="code-name">.epic-icon-html</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-menu"></span>
          <div class="name">menu-菜单</div>
          <div class="code-name">.epic-icon-menu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-edit"></span>
          <div class="name">edit-编辑</div>
          <div class="code-name">.epic-icon-edit</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-calendar"></span>
          <div class="name">calendar-日历</div>
          <div class="code-name">.epic-icon-calendar</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-download"></span>
          <div class="name">download-下载</div>
          <div class="code-name">.epic-icon-download</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-upload"></span>
          <div class="name">upload-上传</div>
          <div class="code-name">.epic-icon-upload</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-folder"></span>
          <div class="name">folder-文件夹</div>
          <div class="code-name">.epic-icon-folder</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-write"></span>
          <div class="name">write-写</div>
          <div class="code-name">.epic-icon-write</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-gallery"></span>
          <div class="name">gallery-画廊</div>
          <div class="code-name">.epic-icon-gallery</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-image"></span>
          <div class="name">image-图像</div>
          <div class="code-name">.epic-icon-image</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-time"></span>
          <div class="name">time-时间</div>
          <div class="code-name">.epic-icon-time</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-button-add"></span>
          <div class="name">button-add-按钮添加</div>
          <div class="code-name">.epic-icon-button-add</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-button-remove"></span>
          <div class="name">button-remove-按钮删除</div>
          <div class="code-name">.epic-icon-button-remove</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-qiapian"></span>
          <div class="name">卡片</div>
          <div class="code-name">.epic-icon-qiapian</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zhage"></span>
          <div class="name">栅格</div>
          <div class="code-name">.epic-icon-zhage</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-danxuan-cuxiantiao"></span>
          <div class="name">单选-粗线条</div>
          <div class="code-name">.epic-icon-danxuan-cuxiantiao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-xiala"></span>
          <div class="name">下拉2</div>
          <div class="code-name">.epic-icon-xiala</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-fengexian"></span>
          <div class="name">分割线</div>
          <div class="code-name">.epic-icon-fengexian</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zihao"></span>
          <div class="name">字号</div>
          <div class="code-name">.epic-icon-zihao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-juxingkaobei"></span>
          <div class="name">树型</div>
          <div class="code-name">.epic-icon-juxingkaobei</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-edit1"></span>
          <div class="name">edit</div>
          <div class="code-name">.epic-icon-edit1</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-pingfen_moren"></span>
          <div class="name">评分_默认</div>
          <div class="code-name">.epic-icon-pingfen_moren</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-edit-"></span>
          <div class="name">edit-2</div>
          <div class="code-name">.epic-icon-edit-</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-number"></span>
          <div class="name">number</div>
          <div class="code-name">.epic-icon-number</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zu"></span>
          <div class="name">提示</div>
          <div class="code-name">.epic-icon-zu</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-guanlian"></span>
          <div class="name">关联</div>
          <div class="code-name">.epic-icon-guanlian</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-tabs"></span>
          <div class="name">tabs</div>
          <div class="code-name">.epic-icon-tabs</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-chexiao"></span>
          <div class="name">撤销</div>
          <div class="code-name">.epic-icon-chexiao</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-quanping"></span>
          <div class="name">全屏</div>
          <div class="code-name">.epic-icon-quanping</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zhongzuo"></span>
          <div class="name">重做</div>
          <div class="code-name">.epic-icon-zhongzuo</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-zujian"></span>
          <div class="name">组件</div>
          <div class="code-name">.epic-icon-zujian</div>
        </li>

        <li class="dib">
          <span class="icon iconfont epic-icon-bianji2"></span>
          <div class="name">编辑2</div>
          <div class="code-name">.epic-icon-bianji2</div>
        </li>
      </ul>
    </div>
    <script>
      $(document).ready(function () {
        $(".tab-container .content:first").show();

        $("#tabs li").click(function (e) {
          var tabContent = $(".tab-container .content");
          var index = $(this).index();

          if ($(this).hasClass("active")) {
            return;
          } else {
            $("#tabs li").removeClass("active");
            $(this).addClass("active");

            tabContent.hide().eq(index).fadeIn();
          }
        });
      });
    </script>
  </body>
</html>
